<template>
    <div class="detailsBox">
        <div class="name">
            {{ modelData.model.name }}
        </div>

        <div class="details">
            <span>HEIGHT : {{ modelData.model.height }}</span>
            <span>BUST : {{ modelData.model.bust }}</span>
            <span>WAIST : {{ modelData.model.waist }}</span>
            <span>HIPS : {{ modelData.model.hips }}</span>
            <span>EYES&nbsp;:&nbsp;{{ modelData.model.eyes }}</span>
            <span>HAIR : {{ modelData.model.hair }}</span>
            <span>SHOES : {{ modelData.model.shoes }}</span>
        </div>

        <div class="imagesBox">
            <img v-for="item in modelData.images" :src="item.imageUrl" alt="">
        </div>
    </div>
</template>

<script setup lang="ts">
import { searchModelProfileAPI } from '@/apis/user';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';

const modelData = ref({
    model: {
        id: null,
        "inTown": 1,
        "name": "DARIA T",
        "headImage": "http://dummyimage.com/400x400",
        "sex": 1,
        "height": "175",
        "bust": "78",
        "waist": "60",
        "hips": "90",
        "hair": "BROWN",
        "eyes": "BLUE",
        "shoes": "39"
    },
    images: [
        {
            "id": 1,
            "modelId": 1,
            "imageUrl": "1----"
        },
        {
            "id": 2,
            "modelId": 1,
            "imageUrl": "1-2"
        },
    ]
})

const getDetails = async () => {
    const res = await searchModelProfileAPI();

    if (res.data.code === 200) {

    }
    else {
        ElMessage.error(res.data.msg)
    }

}
</script>

<style lang="scss" scoped>
@media (min-width: 1280px) and (max-width: 1920px) {}

@media (min-width: 750px) and (max-width: 1280px) {
    .name {
        margin-top: 80px !important;
    }

    .details {
        margin: 0px 10px !important;
        margin-bottom: 20px !important;

    }
}

@media (max-width: 750px) {
    .name {
        margin-top: 40px !important;
    }

    .details {
        margin: 0px 10px !important;
        margin-bottom: 20px !important;

        span {
            margin-right: 20px !important;
        }
    }
}

.detailsBox {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1024px;
    align-items: center;
    margin: 0 auto;

    .name {
        margin-top: 100px;
        margin-bottom: 30px;
        line-height: 36px;
        font-size: 30px;
        // font-weight: bold;
    }

    .details {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 30px;
        align-items: center;
        justify-content: center;

        span {
            margin-right: 20px;
        }
    }

    .imagesBox {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 4px;
        overflow: hidden;

        img {
            width: 100%;
        }
    }
}
</style>